<template>
    <div>

        <main class="container main">
        <h1>登录</h1>
        <p>手机号注册或登录</p>
        <div class="tab">
            <p :class="num==0?'con':''" @click="num=0"><span>验证码登录</span></p>
            <p :class="num==1?'con':''" @click="num=1"><span>账号密码登录</span></p>
        </div>
        <!-- 手机登录 -->
        <div class="phoneSgin" v-if="num==0">
            <div class="input">
                +86(中国大陆)
            </div>
            <div class="input">
                <input type="text" placeholder="请输入手机号码" v-model="phoneNum">
            </div>
            <div class="sgin" @click="phoneSgin">
                登录
            </div>

            <p class="agreement">
                点“登录”按钮，即表明您已阅读并同意
                <span>《摩点网用户协议》</span>和
                <span>《隐私权政策》</span>
            </p>


            <div class="change">
                <fieldset>
                    <legend><span>社交账号快捷登录</span></legend>
                </fieldset><img src="../assets/img/wb.png" alt="">
            </div>
        </div>
        
        <!-- 账号密码登录 -->
        <div class="phoneSgin" v-if="num==1">
            <div class="input">
                +86(中国大陆)
            </div>
            <div class="input">
                <input type="text" placeholder="请输入手机号码" v-model="phone">
            </div>
            <div class="input">
                <input type="text" placeholder="请输入密码" v-model="password">
            </div>
            <div class="forgot">忘记密码</div>
            <div class="sgin" style="background-color:#00d6a6;" @click="getCode">
                登录
            </div>

            <p class="agreement">
                点“登录”按钮，即表明您已阅读并同意
                <span>《摩点网用户协议》</span>和
                <span>《隐私权政策》</span>
            </p>
        </div>


    </main>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                num:0,
                phoneNum:'',

                phone:'',
                password:'',
            };
        },
        methods:{
          phoneSgin(){
            let reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if(!reg.test(this.phoneNum)){
              this.$toast("手机号或密码有误!")
              return;
            }else{
              this.$toast("登陆成功");
              this.$router.push("/home");
              window.localStorage.setItem("token","qwqwqwqwqwq")
              window.localStorage.setItem("userId","123123")

            }

          },
          getCode(){
            // 1.验证手机号码
            let reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            // 2.验证密码
            let pw=/^[a-zA-Z0-9]\w{8,17}$/;
            
            if(!reg.test(this.phone) || !pw.test(this.password)){
              this.$toast("手机号或密码有误!")
              return;
            }else{
              this.$toast("登陆成功");
              this.$router.push("/home");
              window.localStorage.setItem("token","qwqwqwqwqwq")
              window.localStorage.setItem("userId","123123")
            }
            
          }
        }
    }
</script>

<style lang="scss">
.main {
  padding: 43px 25px 0 25px;
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 14px;
    line-height: 14px;
  }
  .tab {
    margin-top: 34px;
    height: 40px;
    display: flex;
    p {
      position: relative;
      font-size: 15px;
      line-height: 40px;
      color: #bcbfc3;
      padding-right: 30px;
      font-weight: 700;
      &.con {
        color: #222c37;
      }
    }
  }
  .input {
    margin-top: 34px;
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    padding: 0 16px;
    margin-bottom: 20px;
    background: #f8f8f9;
    font-size: 15px;
    line-height: 45px;
    color: #4b5259;
    position: relative;
    cursor: pointer;
    input {
      width: 100%;
      height: 100%;
      background: none;
      border: none;
    }
  }
  .forgot {
    line-height: 37px;
    height: 37px;
    font-size: 14px;
    margin-bottom: 9px;
    color: #576b95;
    text-align: right;
  }
  .sgin {
    margin-top: 34px;
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    padding: 0 16px;
    margin-bottom: 20px;
    background: #f8f8f9;
    font-size: 15px;
    line-height: 45px;
    color: #fff;
    position: relative;
    cursor: pointer;
    background-color: #7a8087;
    text-align: center;
  }
  .agreement {
    padding-top: 10px;
    color: #222c37;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
    span {
      color: #576b95;
    }
  }
  .change {
    width: 80%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 35px;
    text-align: center;
    fieldset {
      padding: 0;
      border: none;
      border-top: 1px solid #ccc;
      text-align: center;
      margin: 0 auto;
      margin-bottom: 20px;
      color: #4b5259;
    }
    legend {
      color: #4b5259;
      font-size: 15px;
      padding: 0 8px;
    }
    img {
      width: 55px;
      height: 55px;
      cursor: pointer;
      margin: 0 auto;
    }
  }
 
}


</style>